<template>
	<div class="Word">
		<!--个人收入证明-->
		<el-dialog :visible.sync="dialogFormVisible" @close="dialogClose" @open="dialogOpen">
			<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" style="width: 400px;"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="form.gender">
						<el-radio label="男">男</el-radio>
						<el-radio label="女">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="身份证号码">
					<el-input v-model="form.idCard" style="width: 400px;"></el-input>
				</el-form-item>
				<el-form-item label="工作开始日期">
					<el-date-picker v-model="form.startDate" type="date" placeholder="选择日期"
						style="width: 400px;"></el-date-picker>
				</el-form-item>
				<el-form-item label="职务">
					<el-input v-model="form.position" style="width: 400px;"></el-input>
				</el-form-item>
				<el-form-item label="工资">
					<el-input v-model="form.salary" style="width: 400px;"></el-input>元
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cacel()">取 消</el-button>
				<el-button type="primary" @click="confirm()">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 纳税信息 -->
		<el-dialog title="填写个人信息" :visible.sync="dialogFormVisible1" @close="dialogClose1" @open="dialogOpen1">
			<el-form :model="form1" :rules="rules" ref="form">
				<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
					<el-input v-model="form1.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别" :label-width="formLabelWidth">
					<el-radio-group v-model="form1.gender">
						<el-radio label="男">男</el-radio>
						<el-radio label="女">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="年龄" :label-width="formLabelWidth">
					<el-input-number v-model="form1.age" :min="1" :max="150"></el-input-number>
				</el-form-item>
				<el-form-item label="国籍" :label-width="formLabelWidth">
					<el-select v-model="form1.nationality" placeholder="请选择国籍">
						<el-option label="中国" value="中国"></el-option>
						<el-option label="美国" value="美国"></el-option>
						<!-- 其他国籍选项 -->
					</el-select>
				</el-form-item>
				<el-form-item label="证件类型" :label-width="formLabelWidth">
					<el-select v-model="form1.documentType" placeholder="请选择证件类型">
						<el-option label="身份证" value="身份证"></el-option>
						<el-option label="护照" value="护照"></el-option>
						<!-- 其他证件类型选项 -->
					</el-select>
				</el-form-item>
				<el-form-item label="证件号" :label-width="formLabelWidth">
					<el-input v-model="form1.documentNumber" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="申请理由" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="form1.reason"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cacel1()">取 消</el-button>
				<el-button type="primary" @click="confirm1()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 此div用来加载PageOffice客户端控件，其中div的高宽及位置就决定了控件的大小及位置 -->
		<div style="width:auto; height:900px;" v-html="poHtmlCode"></div>

	</div>
</template>
<script>
import request from '@/utils/request'
export default {
	data() {
		return {
			poHtmlCode: '',
			dialogFormVisible1: false,
			dialogFormVisible: false,
			form1: {
				name: '',
				gender: '',
				age: 18,
				nationality: '',
				documentType: '',
				documentNumber: '',
				reason: ''
			},
			rules: {
				name: [
					{ required: true, message: '请输入姓名', trigger: 'blur' }
				]
			},
			form: {
				name: '',
				gender: '男',
				idCard: '',
				startDate: '',
				position: '',
				salary: ''
			},
			formLabelWidth: '120px',
		}
	},
	created: function () {
		// 请求后端打开文件
		this.openFile().then(response => {
			this.poHtmlCode = response;
		});
	},
	methods: {
		OnPageOfficeCtrlInit() {
			// PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
			pageofficectrl.AddCustomToolButton("保存", "Save", 1);
			pageofficectrl.AddCustomToolButton("填写收入证明", "dialogOpen()", 0);
			pageofficectrl.AddCustomToolButton("填写个税申请表", "dialogOpen1()", 0);
		},
		Save() {
			//使用SaveFilePage属性设置后端保存方法的Controller路由地址，这个地址必须从"/"开始
			pageofficectrl.SaveFilePage = "/ApplicationForm/save";
			//在这里写您保存前的代码
			pageofficectrl.WebSave();
			//在这里写您保存后的代码，比如判断保存结果pageofficectrl.CustomSaveResult
		},
		openFile() {
			return request({
				url: '/ApplicationForm/Word',
				method: 'get',
			})
		},

		dialogOpen() {
			//定位光标到书签处
			pageofficectrl.word.LocateDataRegion("PO_zhengming");

			// 当对话框打开时执行的逻辑
			pageofficectrl.Enabled = false;
			this.dialogFormVisible = true;
		},
		dialogClose() {
			pageofficectrl.Enabled = true;
			this.dialogFormVisible = false;
		},
		cacel() {
			pageofficectrl.Enabled = true;
			this.dialogFormVisible = false;

		},
		confirm() {
			// 执行确认逻辑
			//将form表单的值回填到word中
			pageofficectrl.word.SetValueToDataRegion('PO_name', this.form.name);
			pageofficectrl.word.SetValueToDataRegion('PO_sex', this.form.gender);
			pageofficectrl.word.SetValueToDataRegion('PO_idCard', this.form.idCard);
			//将日期转换
			pageofficectrl.word.SetValueToDataRegion('PO_startDate', this.formatDate(this.form.startDate));
			pageofficectrl.word.SetValueToDataRegion('PO_job', this.form.position);
			pageofficectrl.word.SetValueToDataRegion('PO_salary', this.form.salary);

			this.dialogFormVisible = false;
			pageofficectrl.Enabled = true;
		},

		dialogOpen1() {
			//定位光标到书签处
			pageofficectrl.word.LocateDataRegion("PO_shenqingbiao");
			pageofficectrl.Enabled = false;
			this.dialogFormVisible1 = true;
		},
		cacel1() {
			pageofficectrl.Enabled = true;
			this.dialogFormVisible1 = false;
		},
		dialogClose1() {
			pageofficectrl.Enabled = true;
		},
		confirm1() {
			pageofficectrl.Enabled = true;
			this.dialogFormVisible1 = false;
			//将form表单的值回填到word中
			pageofficectrl.word.SetValueToDataRegion('PO_PersonName', this.form1.name);
			if ('男' == this.form1.gender) {
				pageofficectrl.word.SetValueToDataRegion('PO_PersonGender', '☑男 □女');
			} else {
				pageofficectrl.word.SetValueToDataRegion('PO_PersonGender', '□男 ☑女');
			}
			pageofficectrl.word.SetValueToDataRegion('PO_PersonAge', this.form1.age.toString());
			pageofficectrl.word.SetValueToDataRegion('PO_PersonNation', this.form1.nationality);
			pageofficectrl.word.SetValueToDataRegion('PO_PersonIDType', this.form1.documentType);
			pageofficectrl.word.SetValueToDataRegion('PO_PersonID', this.form1.documentNumber);
			pageofficectrl.word.SetValueToDataRegion('PO_PersonReason', this.form1.reason);
		},
		formatDate(date) {
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			return `${year}-${month}-${day}`;
		}

	},
	mounted: function () {
		//将当前页面methods中定义的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
		window.POPageMounted = this;//此行必须
	}
}
</script>
